import React from 'react';
import "./Header.css"
import { useNavigate } from 'react-router-dom';
import LogoutIcon from '@mui/icons-material/Logout';
import SettingsIcon from '@mui/icons-material/Settings';


const Header = () => {

    let navigate = useNavigate();

    function logout(){
      localStorage.removeItem('access')
      localStorage.removeItem('refresh')
      console.log('logout')
      navigate('/login')
    }
  return (
    <div className="header">
      <div className="left">
        <button onClick={() => {navigate('/settings')}}>
            <SettingsIcon/>
            Настройки
            </button>
      </div>
      <div className="center">
        <img height={50} src={`${process.env.REACT_APP_BASE_URL}/logo.png`} alt="Logo" onClick={() => { navigate('/home')}} />
      </div>
      <div className="right">
        <button onClick={logout}>
        <LogoutIcon/>
            Выход
            </button>
      </div>
    </div>
  );
}

export default Header;
